<template>
  <div class="min-h-screen h-dvh flex flex-col bg-grad text-gray-900 overflow-hidden">
    <!-- 顶部栏 -->
    <header class="safe-top sticky top-0 z-30 bg-white/70 backdrop-blur-md border-b border-gray-100">
      <div class="max-w-screen-md mx-auto px-4 py-3 flex items-center justify-between">
        <!-- 返回按钮 -->
        <button v-if="showBackButton" @click="handleBack" class="inline-flex items-center text-sm font-medium text-gray-600 hover:text-gray-900">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" class="w-5 h-5 mr-0.5">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
          </svg>
          <span>返回</span>
        </button>
        <div v-else class="w-16"></div>

        <!-- 页面标题 -->
        <h1 class="text-xl font-extrabold tracking-tight text-gray-900 flex-1 text-center">{{ currentTitle }}</h1>

        <!-- 右侧占位，保持平衡 -->
        <div class="w-16"></div>
      </div>
    </header>

    <!-- 内容 -->
    <main class="flex-1 min-h-0 pb-20 safe-bottom overflow-y-auto">
      <div class="max-w-screen-md mx-auto px-4 py-4">
        <router-view />
      </div>
    </main>

    <!-- 底部导航 -->
    <nav class="safe-bottom fixed bottom-0 inset-x-0 z-30 bg-white/80 backdrop-blur border-t border-gray-100">
      <div class="max-w-screen-md mx-auto grid grid-cols-4">
        <button @click="goTo('/home')" class="flex flex-col items-center justify-center py-2 text-sm" :class="isActive('/home') ? 'text-brand-600' : 'text-gray-500'">
          <span class="i-home w-6 h-6 mb-0.5">
            <svg v-if="isActive('/home')" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6"><path d="M11.47 3.841a.75.75 0 0 1 1.06 0l8.69 8.69a.75.75 0 0 1-1.06 1.06l-.66-.659V19.5A2.25 2.25 0 0 1 17.25 21h-1.5a.75.75 0 0 1-.75-.75V17.25a.75.75 0 0 0-.75-.75h-3a.75.75 0 0 0-.75.75v2.999a.75.75 0 0 1-.75.751H7.5A2.25 2.25 0 0 1 5.25 19.5v-6.568l-.66.66a.75.75 0 1 1-1.06-1.061l8.69-8.69Z"/></svg>
            <svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="m3 9 9-7 9 7v10.5A1.5 1.5 0 0 1 19.5 21h-15A1.5 1.5 0 0 1 3 19.5V9Z"/></svg>
          </span>
          <span>首页</span>
        </button>
        <button @click="goTo('/sites')" class="flex flex-col items-center justify-center py-2 text-sm" :class="isActive('/sites') ? 'text-brand-600' : 'text-gray-500'">
          <svg v-if="isActive('/sites')" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6"><path d="M11.7 2.3a1 1 0 0 1 1.6 0l8 10.4a1 1 0  1-1.6H4.5a1 1 0 0 1-.8-1.6l8-10.4Z"/><path d="M3 22a1 1 0 0 1 1-1h16a1 1 0 1 1 0 2H4a1 1 0 0 1-1-1Z"/></svg>
          <svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M12 2l9 13H3L12 2Z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M4 21h16"/></svg>
          <span>站点</span>
        </button>
        <button @click="goTo('/orders')" class="flex flex-col items-center justify-center py-2 text-sm" :class="isActive('/orders') ? 'text-brand-600' : 'text-gray-500'">
          <svg v-if="isActive('/orders')" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6"><path d="M3.375 3C2.339 3 1.5 3.84 1.5 4.875v.75c0 1.036.84 1.875 1.875 1.875h17.25c1.035 0 1.875-.84 1.875-1.875v-.75C22.5 3.839 21.66 3 20.625 3H3.375z"/><path fill-rule="evenodd" d="m3.087 9 .54 9.176A3 3 0 0 0 6.62 21h10.757a3 3 0 0 0 2.995-2.824L20.913 9H3.087zm6.163 3.75A.75.75 0 0 1 10 12h4a.75.75 0 0 1 0 1.5h-4a.75.75 0 0 1-.75-.75z" clip-rule="evenodd"/></svg>
          <svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M3.75 12h16.5m-16.5 3.75h16.5M3.75 19.5h16.5M5.625 4.5h12.75a1.875 1.875 0 0 1 0 3.75H5.625a1.875 1.875 0 1 1 0-3.75Z"/></svg>
          <span>订单</span>
        </button>
        <button @click="goTo('/mine')" class="flex flex-col items-center justify-center py-2 text-sm" :class="isActive('/mine') ? 'text-brand-600' : 'text-gray-500'">
          <svg v-if="isActive('/mine')" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6"><path d="M12 2a6 6 0 1 1 0 12A6 6 0 0 1 12 2Z"/><path d="M3 22a9 9 0 1 1 18 0H3Z"/></svg>
          <svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" class="w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M12 12a6 6 0 1 0 0-12 6 6 0 0 0 0 12Z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M3 22a9 9 0 1 1 18 0"/></svg>
          <span>我的</span>
        </button>
      </div>
    </nav>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

const titles = {
  '/home': '首页',
  '/sites': '站点',
  '/ranking': '场站排名',
  '/orders': '订单',
  '/mine': '我的',
  '/withdraw': '提现',
  '/income-records': '入账记录',
  '/withdraw-records': '提现记录',
  '/change-password': '修改密码'
}

const currentTitle = computed(() => titles[route.path] || '充电收益')

const showBackButton = computed(() => {
  const backRoutes = ['/ranking', '/income-records', '/withdraw-records', '/withdraw', '/change-password']
  return backRoutes.includes(route.path)
})

const isActive = (path) => {
  if (path === '/home') {
    return route.path === '/home'
  }
  return route.path.startsWith(path)
}

const goTo = (path) => {
  router.push(path)
}

const handleBack = () => {
  if (route.path === '/ranking') {
    router.push('/sites')
  } else if (['/income-records', '/withdraw-records', '/withdraw'].includes(route.path)) {
    router.push('/mine')
  } else {
    router.back()
  }
}
</script>